<template>
  <a-modal
    width="600px"
    :footer="null"
    :maskClosable="false"
    :closable="false"
    :mask="false"
    v-model:open="rqModal.show"
    :wrap-style="{ overflow: 'hidden' }"
  >
    <template #title>
      <modalTitle @close="rqModal.show = false" :title="rqModal.title"></modalTitle>
    </template>
    <div style="padding: 0 10px 10px 10px">
      <mTable :titleData="rqModal.titleData" :valueData="rqModal.valueData" @click-btn="rowClick"></mTable>
      <modalPage :total="total" @pageChange="pageChange"></modalPage>
    </div>
  </a-modal>
</template>
<script setup>
import $api from "@/utils/request.js"
import { reactive, ref } from "vue"
import modalTitle from "../modalTitle.vue"
import mTable from "../mTable.vue"
import modalPage from "../modalPage.vue"

const rqModal = reactive({
  show: false,
  title: "",
  titleData: [
    {
      name: "姓名",
      key: "name",
      style: {
        width: "80px"
      }
    },
    {
      name: "年龄",
      key: "age",
      style: {
        width: "80px"
      }
    },
    {
      name: "性别",
      key: "sexText",
      style: {
        width: "80px"
      }
    },
    {
      name: "联系电话",
      key: "mobile",
      style: {
        width: "100px"
      }
    },
    {
      name: "居住地址",
      key: "address",
      style: {
        flex: 1
      }
    }
  ],
  valueData: []
})

const emit = defineEmits(["rowClick"])
const rowClick = () => {
  emit("rowClick")
}
const close = () => {
  rqModal.show = false
}
const searchData = ref({
  page: 1,
  tag_id: 0
})
const pageChange = (e) => {
  searchData.value.page = e
  getData()
}
const total = ref(0)
const getData = async () => {
  const res = await $api.get("/api/index/get_people_list", searchData.value)
  if (res.code === 1) {
    res.data.data.forEach((item) => {
      item.jzxq = item.house.name
      if (item.sex === 1) {
        item.sexText = "男"
      } else if (item.sex === 2) {
        item.sexText = "女"
      }
    })
    rqModal.valueData = res.data.data
    total.value = res.data.total
  }
}
const show = (e) => {
  if (e) {
    searchData.value.tag_id = e.id
    rqModal.title = e.name
    getData()
  }
  rqModal.show = true
}
defineExpose({ show, close })
</script>
